<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="google" content="notranslate" />
<title>图表</title>
<link href="ext-6.6.0/build/classic/theme-crisp/resources/theme-crisp-all.css"	rel="stylesheet" type="text/css" />
<link href="ext-6.6.0/build/examples/kitchensink/crisp-en/resources/KitchenSink-all.css"	rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

<script src="ext-6.6.0/build/ext-all.js" type="text/javascript"></script>
<script src="ext-6.6.0/build/classic/locale/locale-zh_CN.js" type="text/javascript"></script>
<script	src="ext-6.6.0/build/packages/charts/classic/charts.js"></script>
<!--script src="js/common.js" type="text/javascript"></script-->
<script src="js/main_left.js" type="text/javascript"></script>
<script src="js/main_top.js" type="text/javascript"></script>
<script src="js/model.js" type="text/javascript"></script>
<script src="widget/colorbutton.js" type="text/javascript"></script>
<style>
html, body {
	margin: 0;
	height: 100%;
}
.transform_logo{color:green;}
</style>
<script>
function toastSuccess(message) {
    Ext.toast({
        html: message?message:'操作成功！',
        title: '系统提示',
        width: 200,
        align: 't'
    });
}

function messageAlert(message) {
    Ext.Msg.alert('操作失败,错误原因如下:', message)
}
function ajaxPost(url,para) {
    Ext.getBody().mask("请稍等..."); 
    Ext.Ajax.request({
        url: url,
        params: para,
        success:function(response, opts) {
            console.log(response.responseText)
            var res = Ext.JSON.decode(response.responseText)
            Ext.getBody().unmask()
            if (res.success) {
                messageAlert(res.message)
            } else {
                toastSuccess(res.message)
            }
            //func(response)
        },
        failure: function(response, opts) {
            alert(1)
        }
    });
}
</script>    


<script>
            //Ext.Loader.setPath('Hy', 'js/widget/Hy');
            //var d = Ext.create("Hy.Grid",{title: '系统登录'})
            Ext.define('MyApp.view.main.MainController', {
                extend : 'Ext.app.ViewController',

                routes : {
                    ':id1/:id2/:id3/:id4' : 'onHandle',
                    ':id1/:id2/:id3' : 'onHandle',
                    ':id1/:id2' : 'onHandle',
                    ':id' : 'onHandle'
                },

                onHandle : function(id1,id2,id3,id4) {
                    
                    window.urlParameter1 = id1
                    window.urlParameter2 = id2
                    window.urlParameter3 = id3
                    window.urlParameter4 = id4
                    viewMode = window.urlParameter3?(window.urlParameter3=="view"):false
                    searchId = window.urlParameter2
                    Ext.getBody().mask("请稍等");


                    window.moduleId = id1.substring(0,id1.indexOf('%'))

                    Ext.Loader.loadScript({
                        url: 'js/'+id1.replace('%','/')+'.js',
                        scope: this,
                        onLoad: function() {
                            Ext.getBody().unmask()
                            //appPanel.items.items[1].removeAll(true)
                            //appPanel.items.items[1].add(centerItem)
                           
                        }
                    });

                    /*Ext.Ajax.request({
                        url: 'js/'+id1.replace('%','/')+'.js',
                        params: {},
                        success:function(response) {
                            //console.log(response.responseText)
                            
                            Ext.getBody().unmask()
                            //console.log(centerItem)
                            
                            appPanel.items.items[2].removeAll(true)
                            try {
                                eval(response.responseText)
                            } catch(e) {
                                console.log(e)
                                //window.location='login/login.html'
                            }    
                            appPanel.items.items[2].add(centerItem)
                            
                        },
                        failure: function(response, opts) {
                            window.location='login/login.html'
                            //console.log('server-side failure with status code ' + response.status);
                        }
                    });*/
                   
                }
            });

      

            Ext.on("resize", function(){appPanel.updateLayout()}, this);

            Ext.application({
                name: "MyApp",
                listen : {
                    controller : {
                        '#' : {
                            unmatchedroute : 'onUnmatchedRoute'
                        }
                    }
                },

                defaultToken : 'home',
                mainView: 'MyApp.view.main.MainController',
                onUnmatchedRoute : function(hash) {
                    alert("Unmatched Route!")
                },

                launch: function() {

                    Ext.tip.QuickTipManager.init();
                    Ext.EventManager.onWindowResize(function(width,height) {});



                    window.appPanel = Ext.create('Ext.panel.Panel', {
                        title:"",
                        layout: 'border',
                        
                        defaults: {
                            collapsible: false,
                            split: false,
                            bodyPadding: 0
                        }, 
                        height:'100%',
                        width: '100%',  
                        
                        items:[
                            {
                                title: '',
                                region: 'south',
                                height: 315,
                                //minHeight: 75,
                                //maxHeight: 150,
                                items:[

                                    {
                                        xtype:'tabpanel',
                                        width: '100%',
                                        id:'chartConfig',
                                        height: 300,
                                        title:'',
                                        tabBarHeaderPosition: 0,
                                        plain:true,
                                        defaults: {
                                            bodyPadding: 10,
                                            scrollable: true
                                        },
                                        tools:[
                                            {
                                                iconCls: 'x-fa fa-bars',
                                                handler: function(event, toolEl, panelHeader) {
                                                    
                                                }
                                            },
                                            {
                                                iconCls: 'x-fa fa-align-center',
                                                handler: function(event, toolEl, panelHeader) {
                                                    
                                                }
                                            },
                                            {
                                                iconCls:'x-fa fa-align-justify',
                                                callback: function(panel, tool, event) {
                                                    
                                                }
                                            }
                                        ],
                                        items: [
                                            /*{
                                                title: '基本',
                                                items:[]
                                            },*/
                                            {
                                                title: '标题',
                                                //width:900,
                                                layout:'hbox',
                                                selected:true,
                                                bodyPadding: 0,
                                                defaults: {
                                                    bodyPadding: 0,
                                                    scrollable: true
                                                },
                                                items:[
                                                    {
                                                                xtype: 'toolbar',
                                                                dock: 'left',
                                                                border:false,
                                                                items: [
                                                                    {
                                                                        text: '基本属性'
                                                                    },
                                                                    {
                                                                        text: '标题样式',
                                                                        handler:function() {
                                                                            Ext.getCmp('form1').scrollTo(0,150)
                                                                        }
                                                                    },
                                                                    {
                                                                        text: '子标题样式'
                                                                    }
                                                                ]
                                                            },
                                                    {
                                                        xtype:'form',
                                                        border:false,
                                                        width:1800,
                                                        id:'form1',
                                                        height:260,
                                                        items:[
                                                            {
                                                                xtype: 'fieldset',
                                                                title: '基本属性',
                                                                collapsible: false,
                                                                layout: 'column',
                                                                defaults: {
                                                                    layout: 'form',
                                                                    xtype: 'container',
                                                                    defaultType: 'textfield',
                                                                    style: 'width: 20%'
                                                                },

                                                                items: [{
                                                                    items: [
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>标识</font> Id' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>文本</font> Text' },
                                                                        { xtype:'numberfield',fieldLabel: '<font style="font-weight:bold" color=blue>边距</font> Padding' },
                                                                        { xtype:'colorbutton',fieldLabel: '<font style="font-weight:bold" color=blue>阴影色</font> Shadow Color' }
                                                                    ]
                                                                }, {
                                                                    items: [
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>条目间隔</font> Item Gap' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>背景色</font> Background Color ' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>底距</font> Bottom ' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>右距</font> Right' }
                                                                    ]
                                                                }, {
                                                                    items: [
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>链接地址</font> Target' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>边框角度</font> Border Radius' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>左距</font> Left ' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>Z</font> Z' }
                                                                    ]
                                                                }, {
                                                                    items: [
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>边框色</font> Border Color' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>边框宽</font> Border Width' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>阴影偏移X</font> Shadow Offset X' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>阴影偏移Y</font> Shadow Offset Y' }
                                                                    ]
                                                                }, {
                                                                    items: [
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>字体</font> Font Style' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>粗细</font> Font Weight' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>文字边宽</font> Text Border Width' },
                                                                        { fieldLabel: '<font style="font-weight:bold" color=blue>标识</font> Font Family' }
                                                                    ]
                                                                }]

                                                            },
                                                            {
                                                                xtype: 'fieldset',
                                                                title: '标题样式',
                                                                height:300,
                                                                collapsible: false,
                                                                defaults: {
                                                                    labelWidth: 90,
                                                                    anchor: '100%',
                                                                    layout: 'hbox'
                                                                }
                                                            },
                                                            {
                                                                xtype: 'fieldset',
                                                                title: '子标题样式',
                                                                collapsible: false,
                                                                defaults: {
                                                                    labelWidth: 90,
                                                                    anchor: '100%',
                                                                    layout: 'hbox'
                                                                }
                                                            }
                                                        ]
                                                    }
                                                ]
                                            }, {
                                                title: '文字样式',
                                                items:[]
                                            }, {
                                                title: '区域选择',
                                                items:[]
                                            }, {
                                                title: '提示框',
                                                items:[]
                                            }, {
                                                title: '工具栏',
                                                items:[]
                                            }, {
                                                title: '无障碍访问',
                                                items:[]
                                            }
                                        ]
                                    }



                                ]
                            },
                            {
                                title: '图表结构',
                                region:'west',
                                floatable: false,
                                margin: '5 0 0 0',
                                items:[
                                    {
                                        xtype: 'treepanel',
                                        width: 350,
                                        height: 570,
                                        reserveScrollbar: true,
                                        useArrows: true,
                                        rootVisible: false,
                                        multiSelect: false,
                                        singleExpand: true,
                                        dockedItems: [{
                                            xtype: 'toolbar',
                                            dock: 'top',
                                            items: [
                                                { xtype: 'button', text: '折线图',iconCls:'' },
                                                { xtype: 'button', text: '柱状图' },
                                                { xtype: 'button', text: '饼图' },
                                                { xtype: 'button', text: '散点图' },
                                                { xtype: 'button', text: '雷达图' }
                                            ]
                                        }],

                                        columns: [
                                            {
                                                xtype: 'treecolumn', 
                                                text: '',
                                                dataIndex: 'bandName',
                                                flex: 1,
                                                sortable: true
                                            }
                                        ],


                                        store: {
                                            type: 'tree',
                                            folderSort: true,
                                            proxy: {
                                                type: 'ajax',
                                                url: '../app/chartprofilestore'
                                            }
                                        }
                                    }
                                ]
                            },
                            {
                                title: '图表预览',
                                collapsible: false,
                                region: 'center',
                                margin: '5 0 0 0',
                                items:[
                                ],
                                
                            }
                        ],
                        renderTo: Ext.getBody()
                    });            
                    

                    /*Ext.Ajax.request({
                        url: '../base/logininfo',
                        params: {},
                        success:function(response) {
                            var res = Ext.JSON.decode(response.responseText)
                            console.log(res.userLogin.userName+"("+res.userLogin.userLoginId+")")
                            Ext.getCmp('nowUserLogin').setText(res.userLogin.userName+"("+res.userLogin.userLoginId+")")
                            Ext.getCmp('nowUserLoginId').setValue(res.userLogin.id)

                        }
                    });*/

                }
            });
        </script>

</head>

<body>
</body>

</html>